<template>
  <view
    @click="click_view_input($event)"
    class="float-label-containers"
    :style="{ '--theme-color': themeColor }"
  >
    <!-- 高亮显示层 -->
    <view class="highlight-layer">
      <rich-text :nodes="highlightedContent"></rich-text>
    </view>

    <!-- 输入框 -->
    <textarea
      class="float-inputs"
      :value="modelValue"
      @input="handleInput"
      @focus="handleFocus"
      @blur="handleBlur"
      ref="ref_text_input"
      auto-height
      maxlength="-1"
    ></textarea>

    <text class="float-labels" :class="{ 'label-actives': shouldFloat }">
      {{ placeholder }}
    </text>

    <view class="underlines" :class="{ 'underline-actives': isFocused }"></view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'

const props = defineProps({
  modelValue: {
    type: [String, Number],
    default: '',
  },
  placeholder: {
    type: String,
    default: '',
  },
  themeColor: {
    type: String,
    default: '#2196F3',
  },
})

const emit = defineEmits(['update:modelValue'])

const ref_text_input = ref('')
const isFocused = ref(false)
const hasContent = ref(false)
const highlightedContent = ref('')
const input_value = ref('')
const modelValue = ref('')

//点击聚焦
const click_view_input = () => {
  // console.log('点击了标签')

  if (ref_text_input.value && ref_text_input.value.focus) {
    ref_text_input.value.focus()
  } else if (typeof document !== 'undefined') {
    // H5 备用方案
    // console.log('H5备用方案')
    // const clickView = event.currentTarget
    // const input = clickView.querySelector('textarea')
    // if (input) input.focus()
  }
}
// 语法高亮函数
const highlightSyntax = (text) => {
  return ''
  // console.log(text)
  // return `<span style="color: red;">djdjdj<span style="color: #a31515;">djdjdj</span></span>`
  // return (
  //   `<span style="color: #83a598;">` +
  //   text
  //     .replace(/"(.*?)"/g, '<span style="color: #a31515;">"$1"</span>')
  //     .replace(/(&)/g, '<span style="color: #e65100;">$1</span>')
  //     .replace(
  //       /\b(var|let|const|function)\b/g,
  //       `<span style="color: ${props.themeColor};">$1</span>`,
  //     )
  //     .replace(
  //       /\b(true|false|null|undefined)\b/g,
  //       '<span style="color: #795e26;">$1</span>',
  //     )
  //     .replace(/\b(\d+)\b/g, '<span style="color: #098658;">$1</span>') +
  //   `</span>`
  // )
}

const handleInput = (e) => {
  const value = e.detail.value
  input_value.value = value
  emit('update:modelValue', value)
  hasContent.value = value !== ''
  highlightedContent.value = highlightSyntax(value)
}

const handleFocus = () => {
  isFocused.value = true
}

const handleBlur = () => {
  isFocused.value = false
}

const shouldFloat = computed(() => {
  return isFocused.value || hasContent.value
})

function get_input_value() {
  // console.log('====get_input_value====')
  // console.log(ref_text_input.value)
  // console.log(input_value.value)
  // return ref_text_input.value
  return input_value.value
}
function set_input_value(str) {
  if (str === '') {
    return
  }
  // console.log(str)
  input_value.value = str
  modelValue.value = str
  // emit('update:modelValue', str)
  highlightedContent.value = highlightSyntax(str)

  hasContent.value = true
}

defineExpose({ get_input_value, set_input_value })
</script>

<style lang="scss">
.float-label-containers {
  position: relative;
  margin: 24rpx 0;
  padding-top: 88rpx;
  width: 90%;

  .highlight-layer {
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 0rpx 0 0 0;
    font-family: 'Menlo', 'Consolas', monospace;
    font-size: 32rpx;
    line-height: 1.5;
    white-space: pre-wrap;
    color: transparent;
    pointer-events: none;
    z-index: 2;
  }

  .float-inputs {
    position: relative;
    font-family: 'Menlo', 'Consolas', monospace;
    width: 100%;
    height: 80rpx;
    font-size: 32rpx;
    padding: 0;
    border: none;
    background: transparent;
    outline: none;
    //color: black;
    color: #098658;
    caret-color: #83a598;
    z-index: 1;
    line-height: 1.5;
  }

  .float-labels {
    position: absolute;
    left: 0;
    top: 40rpx;
    font-size: 32rpx;
    color: #999;
    transition: all 0.2s ease-out;
    pointer-events: none;
    line-height: 1;
    z-index: 3;

    &.label-actives {
      top: 0;
      font-size: 24rpx;
      padding: 0 6rpx;
      margin-left: 8rpx;
      z-index: 2;
    }
  }

  .underlines {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2rpx;
    background: #ddd;
    transition: all 0.3s ease;
    z-index: 3;

    &.underline-actives {
      height: 2rpx;
      background: var(--theme-color);
    }
  }
}
</style>
